<template>
  <div>
    <h1>轮播图列表</h1>
    <el-table :data="bannerList" style="width: 100%" v-loading="loading">
      <el-table-column prop="bannerid" label="轮播图编号" width="360" align="center"/>
      <el-table-column label="Name" width="180" align="center">
        <template #default="scope">
          <img class="img" :src="scope.row.img" />
        </template>
      </el-table-column>
      <el-table-column prop="link" label="图片提示" width="500" align="center"/>
      <el-table-column label="是否启用" v-if="crud.charAt(2)==='1'" align="center">
        <template #default="scope">
          <el-switch
            v-model="scope.row.flag"
            @change="(val:boolean)=>updateBannerFlag(scope.row.bannerid,val)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" v-if="crud.charAt(3)==='1'" align="center">
        <template #default="scope">
          <el-popconfirm
            title="亲，您真的要删除吗?"
            @confirm="deleteBannner(scope.row.bannerid)"
          >
            <template #reference>
              <el-button>删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref,reactive } from "vue";
import service from "../../../utils/service";

import { ElMessage } from "element-plus";
import "element-plus/dist/index.css";
import {useRoute} from "vue-router"


const $route = useRoute()
const crud:string = ($route.meta.crud as string)
console.log("$route",$route);

const loading = ref(true)

interface IBanner {
  link: string;
  img: string;
  alt: string;
  bannerid: string;
  flag: boolean;
}

//1、定义轮播图数据
let bannerList = reactive<IBanner[]>([]);
//2、获取所有的轮播图数据
const getBannerList = () => {
  // service({
  //   url: "/banner/list",
  // }).then((res: any) => {
  //   if (res.data.code === "200") {
  //     bannerList.length = 0;
  //     bannerList.push(...res.data.data);
  //     // console.log("拿到数据的bannerList",bannerList);
  //   }
  // });
  service({
    url: "/banner/list",
  }).then((res: any) => {
    if (res.data.code === "200") {
      // bannerList = res.data.data;
      loading.value = false
      bannerList.length = 0;
      bannerList.push(...res.data.data);
    }
  });
};

//3、更新轮播图的访问状态
const updateBannerFlag = (bannerid: string, val: boolean) => {
  service({
    url: "/banner/updateFlag",
    method: "post",
    data: {
      bannerid: bannerid,
      flag: val,
    },
  }).then((res) => {
    if (res.data.code === "200") {
      ElMessage({
        message:"更新成功！",
        type:"success"
      })
    }
  });
};
getBannerList();

//4、删除单条数据
const deleteBannner = (bannerid: string) => {
  service({
    url: "/banner/delete",
    params: {
      bannerid,
    },
  }).then((res) => {
    if (res.data.code === "200") {
      ElMessage({
        message: "删除成功！",
        type: "success",
      });
      getBannerList();
    }
  });
};
</script>

<style scoped>
.img {
  width: 100px;
  height: 75px;
}

</style>